import * as echarts from "echarts";
import UI_STYLE from "@/assets/styles/platform-style";

export default {
  methods: {
    drawWarningChart() {
      const critical = this.dataList.reduce(
        (total, item) => total + item.critical,
        0
      );
      const warning = this.dataList.reduce(
        (total, item) => total + item.warning,
        0
      );
      const normal = this.dataList.reduce(
        (total, item) => total + item.normal,
        0
      );
      let trafficWay = [
        { value: normal, name: "一般告警", typeName: "normal" },
        { value: warning, name: "警告", typeName: "warning" },
        { value: critical, name: "严重错误", typeName: "critical" },
      ];
      trafficWay = trafficWay.filter((item) => item.value > 0);
      if (trafficWay.length == 0) {
        trafficWay = [{ value: 1, name: "无告警数据", typeName: "nothing" }];
      }
      let total = trafficWay.reduce((a, b) => a + b.value, 0);
      let names = trafficWay.map((item) => item.name);

      var scale = 1;
      var echartData = trafficWay;

      const outFormatter = function (params, ticket, callback) {
        var total = 0; //总数量
        var percent = 0; //占比
        echartData.forEach(function (value, index, array) {
          total += value.value;
        });
        percent = ((params.value / total) * 100).toFixed(1);
        return (
          "{white|" +
          params.name +
          "}\n{hr|}\n{yellow|" +
          params.value +
          "}\n{blue|" +
          percent +
          "%}"
        );
      };
      const outTotalFormatter = function (name) {
        return "{total|" + total + "}";
      };
      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 30 * scale,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 32 * scale,
          align: "center",
        },
        white: {
          color: "#fff",
          align: "center",
          fontSize: 12 * scale,
          padding: [32, 0, 10, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 12 * scale,
          align: "center",
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      var option = {
        title: {
          text: "告警分布",
          left: "center",
          top: "53%",
          padding: [24, 0],
          textStyle: {
            color: "#fff",
            fontSize: 18 * scale,
            align: "center",
          },
        },
        legend: {
          selectedMode: false,
          formatter: outTotalFormatter,
          data: [echartData[0].name],
          // itemGap: 50,
          left: "center",
          top: "center",
          icon: "none",
          align: "center",
          textStyle: {
            color: "#fff",
            fontSize: 16 * scale,
            rich: rich,
          },
        },
        series: [
          {
            name: "告警数量",
            type: "pie",
            // 饼图占画布大小
            radius: ["80%", "60%"],
            hoverAnimation: false,
            color: [
              UI_STYLE.data.normal,
              UI_STYLE.data.warning,
              UI_STYLE.data.critical,
              "#034079",
              "#6f81da",
              "#00ffb4",
            ],
            label: {
              normal: {
                formatter: outFormatter,
                rich: rich,
              },
            },
            labelLine: {
              normal: {
                length: 60,
                length2: 40,
                lineStyle: {
                  color: "#0b5263",
                },
              },
            },
            data: echartData,
          },
        ],
      };

      if (!this.warningChart) {
        this.warningChart = echarts.init(this.$refs.warningChart, "macarons");
      }
      this.warningChart.setOption(option, true);
      this.warningChart.off("click");
      this.warningChart.on("click", (param) => {
        if (this.warningChartType === "detail") {
          // 还原数据
          option.legend.formatter = outTotalFormatter;
          option.legend.data = [echartData[0].name];
          option.series[0].data = echartData;
          option.series[0].label.normal.formatter = outFormatter;
          this.warningChart.setOption(option);
          this.warningChartType = "all";
          return;
        }

        if (!param.name || !param.data.typeName) {
          console.log("return");
          return;
        }

        let newData = this.dataList.map((item) => {
          return {
            name: item.name,
            value: item[param.data.typeName],
          };
        });

        newData = newData.filter((item) => item.value > 0);
        let newTotal = newData.reduce((a, b) => a + b.value, 0);

        const innerFormatter = function (params, ticket, callback) {
          var percent = 0; //占比
          percent = ((params.value / newTotal) * 100).toFixed(1);
          return (
            "{white|" +
            params.name +
            "}\n{hr|}\n{yellow|" +
            params.value +
            "}\n{blue|" +
            percent +
            "%}"
          );
        };
        const innerTotalFormatter = function (name) {
          return "{total|" + newTotal + "}";
        };

        option.legend.formatter = innerTotalFormatter;
        option.legend.data = [newData[0].name];
        option.series[0].data = newData;
        option.series[0].label.normal.formatter = innerFormatter;
        this.warningChart.setOption(option);
        this.warningChartType = "detail";
      });
    },
  },
};
